<template>
  <div class="heard">
    <div class="heardImg">
      <!--     图片展示，等以后有图片了再插入-->

      <img :src="job.coverPhoto" alt="image"style="width: 120px;height: 120px;margin-top: 8%;margin-left: 39%">
    </div>
    <div style="float: left;width: 55%;height: 100%;">
      <div style="margin-left: 40px;margin-top: 30px;">
        <!--          职位名称,超或超过长度显示省略号-->
        <h1 class="Title" style="color: white">{{job.titleName}}</h1>
        <h4 style="margin-top: 20px">公司名称：{{job.corporateName}}</h4>
        <h4 style="margin-top: 20px"><el-icon><LocationFilled /></el-icon> 中国 {{job.recruitmentCity}} </h4>
      </div>
      <div style="position: relative;left: 250px;">
        <div style="float: right;margin-top: -20px;">
          <el-button v-if="col==0" @click="collect" class="baa1" type="info" round><el-icon><Star /></el-icon> 收藏</el-button>
          <el-button v-else @click="collect" class="baa2" type="info" round><el-icon><StarFilled /></el-icon> 收藏</el-button>
        </div>
        <div style="float: right;margin-top: -20px;">
          <el-button @click="chatMsg" class="baa1" type="info" round><router-view>沟通</router-view></el-button>
        </div>
        <div style="float:right;margin-top: -20px;position:relative;z-index: 20">
          <el-button @click="getResume" class="baa1" type="info" round :disabled="isSubmitDisabled === false ">{{ isSubmit }}</el-button>
        </div>
      </div>

    </div>
    <div style="float: right;width:25%;height: 100%;">
      <h1 style="margin-top: 30px;color: white">工资：{{job.salary}}</h1>
    </div>
  </div>
  <!--主要内容开始-->
  <div style="min-width: 1300px;height: 2100px;margin-top: -1px;background: linear-gradient(-56deg, rgba(102,81,238,0.65), rgb(255,255,255));width: 100%;">
    <!--   左边岗位介绍-->
    <div style="width: 60%;background-color: white;border-radius: 20px;margin-top: 20px;float: left;margin-left: 90px;font-size: 16px">
      <h2>招聘类型</h2>
      <!--      职位标签 两行超过后不显示-->
      <div style="width: 89%;margin-top: 10px;margin-left: 34px;margin-bottom:10px;color: #5d4785;height: 36px;overflow:hidden;text-overflow:ellipsis;">
        {{job.jobType}}
      </div>
      <h2>职位描述</h2>
      <!--      职位标签 两行超过后不显示-->
      <div style="width: 89%;margin-top: 10px;margin-left: 34px;margin-bottom:10px;color: #5d4785;height: 36px;overflow:hidden;text-overflow:ellipsis;">
        {{job.jobDetail}}
      </div>
      <h2>职位福利</h2>
      <!--      职位标签 两行超过后不显示-->
      <div style="width: 89%;margin-top: 10px;margin-left: 34px;margin-bottom:10px;color: #5d4785;height: 36px;overflow:hidden;text-overflow:ellipsis;">
        {{job.welfare}}
      </div>
      <!--      <div style="width: 100%;height: 470px;overflow:hidden;text-overflow:ellipsis;">-->

      <!--&lt;!&ndash;      <a-descriptions style="margin-top: 10px;width: 89%;margin-left: 25px;margin-bottom: 10px" :data="data" size="medium" :column="1"/>&ndash;&gt;-->
      <!--      </div>-->
      <a-divider dashed />
      <h2>薪资描述</h2>
      <div style="overflow:hidden;text-overflow:ellipsis;width: 89%;margin-top: 10px;margin-left: 34px;margin-bottom:10px;color: #5d4785;height: 120px;overflow:hidden;text-overflow:ellipsis;">
        薪资范围：{{job.salary}}元/月 <br>
        <!--        提成方式：每单提成：5元-7元/单；<br>-->
        <!--        每天30单-50单；<br>-->
        <br>
        （平台提醒：平均月薪=每天单数*每单提成*月工作天数+其他提成/补贴，请仔细确认）
      </div>
      <h2>工作环境</h2>
      <!--      todo 需要改样式-->
      <el-row>
        <el-col :span="12" v-for="picture in pictureList"><img :src=picture.url alt="image" style="width: 80%;border-radius: 10px;height:250px;margin:10px 20px 20px 30px ;text-align: center"></el-col>
      </el-row>
    </div>
    <!--    安全提示 没啥用 装样子的-->
    <div style="height: 200px;width: 60%;background: linear-gradient(56deg, rgba(255,255,255,0.02), rgba(113,92,252,0.95));border-radius: 20px;margin-top: 10px;float: left;margin-left: 90px;font-size: 16px">
      <h2>职来运转安全提示</h2>
      <h5 style="width: 55%;height: 100%;margin-left: 40px;margin-top: 30px;color: #3b316b">职来运转严禁用人单位和招聘者用户做出任何损害求职者合法权益的违法违规行为，包括但不限于扣押求职者证件、收取求职者财物、
        向求职者集资、让求职者入股 、诱导求职者异地入职、异地参加培训、违法违规使用求职者简历等，您一旦发现此类行为， 请立即举报</h5>
      <img src="../../assets/img/job/safe.png"style="width: 35%;height: 97%;float: right;margin-top: -280px;margin-right: 2px">
    </div>
    <!--    精选职位-->
    <div style="height: 700px;overflow: auto;width: 60%;background: linear-gradient(-56deg, rgba(255,255,255,0.68), rgba(231,228,253,0.95));border-radius: 20px;margin-top: 10px;float: left;margin-left: 90px;font-size: 16px">
      <h2 style="margin-bottom: 5px">精选职位</h2>
      <a-row class="grid-demo">
        <a-col :span="12" v-for="j in companyJob" :key="j" style="width: 50%;height: 100%"
               @click="goToJobDetail(j.id)">
          <div>
            <div class="cardZW"><h2><el-icon><Link /></el-icon></h2>
              <!--              职位名-->
              <h3 style="color: #262628">{{j.titleName}}</h3>
              <div style="margin-bottom: 10px">
                <!--                工资-->
                <h4 style="margin-top: 20px;margin-left: 30px">{{j.salary}}元</h4>
                <h4 style="float: right;margin-top: -20px;margin-right: 30px">学历需求：{{j.educationalRequirements}}</h4>
              </div>
              <a-divider dashed />
              <div style="width: 100%;height: 50%;">
                <!--                头像-->
                <a-avatar style="margin-top: 10px;margin-left: 10px">
                  <img
                      alt="avatar"
                      src="../../assets/img/job/TX.png"
                  />
                </a-avatar>
                <!--                公司名-->
                <h5 style="color: #262628;float: right;margin-right: 100px;margin-top: 20px;width: 200px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden" >
                  公司名称：{{job.corporateName}}
                </h5>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
    <!--  右边内容-->
    <!--    公司基本信息-->
    <div @click="goToCompanyDetail()" style="width: 26%;height: 340px;background: linear-gradient(-56deg, rgba(149,165,241,0.68), rgba(110,48,204,0.95));float: right;margin-top: -1340px;margin-right: 90px;border-radius: 20px">
      <h2 style="color: white">公司基本信息</h2>
      <div style="width: 100%;height: 200px;">
        <!--        公司头像-->
        <div style="margin-top: 0;margin-right: 110px;float: right;width: 20%">
          <a-avatar :size="170" shape="square" >
            <img :src="job.coverPhoto" alt="image">
          </a-avatar>
        </div>
        <!--        左边信息-->
        <div style="width: 45%;height: 170px;margin-top: 25px;margin-left: 30px">
          <!--          融资情况-->
          <h5 ><el-icon><Avatar /></el-icon> {{job.corporateLevel}}</h5>
          <!--         在职 人数-->
          <h5 style="margin-top: 30px"><el-icon><Histogram /></el-icon> {{job.companySize}}</h5>
          <!--          公司类别-->
          <h5 style="margin-top: 30px"><el-icon><TrendCharts /></el-icon> {{job.industryClassification}}</h5>
          <!--          在招职位数-->
          <h5 style="margin-top: 30px"><el-icon><Grid /></el-icon> 在招职位：{{companyJob.length}}</h5>
        </div>

      </div>
      <!--      公司名称-->
      <h3 style="color: rgba(49,35,92,0.74); width: 300px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;"><el-icon><HomeFilled /></el-icon>{{job.corporateName}}</h3>
    </div>
    <!--以下是广告-->
    <img src="../../assets/img/job/1.png" style="width: 26%;height: 220px;background-color:white;float: right;margin-top: -65.5%;margin-right: 90px;border-radius: 20px">

    </img>
    <img src="../../assets/img/job/2.png" style="width: 26%;height: 240px;background-color:white;float: right;margin-top: -50.5%;margin-right: 90px;border-radius: 20px"></img>
    <img src="../../assets/img/job/3.png" style="width: 26%;height: 240px;background-color:white;float: right;margin-top: -34.3%;margin-right: 90px;border-radius: 20px"></img>
  </div>

  <!-- 投递简历弹窗 -->
  <el-dialog :title="dialogTitle" style="width:600px;padding:40px;" v-model="dialogVisible" :before-close="handleClose">
    <el-form label-width="50px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="简历">
            <el-select placeholder="请选择你要投递的简历" v-model="ResumeValue" @change="getResume">
              <el-option v-for="resume in ResumeList" :label="resume.resumeName" :value="resume.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button  @click="handleClose()" style="color: #5B63B7;width: 50px" class="custom-hover-color">取消</el-button>
      <el-button type="primary" color="#5B63B7" style="width: 50px;" @click="sendResume()">投递</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {useRouter} from "vue-router";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";

const router = useRouter();
const id = ref();
const job = ref([]);
const companyJob = ref([]);
const recruitId = ref();
const ids = ref({
  companyId: 0,
  rId: 0
})
const user = ref(getUser());
//控制新增用户弹窗是否显示
const dialogVisible = ref(false);
//定义变量控制dialog的标题
const dialogTitle = ref('投递简历');
// 页面加载时加在数据
onMounted(() => {
  const query = router.currentRoute.value.query;
  id.value = query.id || ''; // 如果没有q参数，则默认为空字符串
  recruitId.value = id.value;
  loadData(recruitId.value);
  checkSubmitState();
  getCompanyEnvDetail();
  loadCollect(recruitId.value);
  window.scrollTo(0, 0);
})
//默认没收藏
const col = ref(0);
const userId = ref(user.value.userId);
const collectInfo = ref();
console.log("collect:"+userId.value);
//查询当前招聘信息是收藏了还是没收藏
const loadCollect = (recruitId) =>{
  if(user.value.identityId=='20'){
    //如果是hr就不用查了，都是没收藏
  }else{
    console.log("collect:"+user.value.userId);
    axios.get(`${BASE_URL}/v1/collect/selectByInfo?userId=${userId.value}&recruitId=${recruitId}`)
        .then((response)=>{
          if (response.data.code == 2000) {
            collectInfo.value = response.data.data;
            console.log("收藏数据111："+response.data.data);
            console.log("收藏数据222："+collectInfo.value.isCollect);
            col.value = collectInfo.value.isCollect;
            //tips：没收藏，isCollect=0
          } else {
            ElMessage.error(response.data.msg);
          }
        })
  }
}
//发起沟通
const chatMsg = () =>{
  let hrdata = qs.stringify({
    userId:job.value.userId
  })
  axios.post(`${BASE_URL}/v1/user/select`,hrdata).then(response =>{
    if(response.data.code==2000){
      console.log("111111111");
      console.log(response.data.data);
      let reUsername = response.data.data[0].username;
      console.log("222222222");
      console.log(reUsername);
      let data = qs.stringify({
        fromUser:user.value.username,
        toUser:reUsername,
        type:1,
        msg:"你好，我是"+user.value.username+"，我想要和您沟通一下！"
      })
      axios.post(`${BASE_URL}/v1/chat/insertChat`,data).then(response =>{
        if(response.data.code==2000){
          ElMessage.success("发起沟通成功！");
          router.push({path: '/chat'})
        }else{
          ElMessage.error(response.data.msg);
        }
      })
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}
//求职者收藏招聘信息
const collect = () => {
  if(user.value.identityId=='20'){
    //如果是hr进行收藏，提示无法收藏
    ElMessage.warning("将状态切换为‘求职者’才可以进行收藏哦");
  }else{
    axios.post(`${BASE_URL}/v1/collect/insertCollect?userId=${userId.value}&recruitId=${recruitId.value}&isCollect=${col.value}`)
        .then((response)=>{
          if (response.data.code == 2000) {
            if(col.value==0){
              //没收藏，点了就是要收藏
              ElMessage.success("收藏成功！");
              col.value = 1;
            }else{
              ElMessage.warning("取消成功！");
              col.value = 0;
            }
          } else {
            ElMessage.error(response.data.msg);
          }
        })
  }
}

// 在线抓取工作环境图片
const companyEnvDetailParam = ref({})
const pictureList = ref([]);

const getCompanyEnvDetail = () => {
  let companyName = "";
  // const recruitId = qs.stringify(recruitId.value);
  const id = recruitId.value;
  axios.get(BASE_URL + '/v1/detail/getCompanyName/' + id).then((response)=>{
    if (response.data.code == 2000) {
      companyName = response.data.data;
      companyEnvDetailParam.value.searchText = companyName + '公司办公环境图';
      companyEnvDetailParam.value.pageNum = 1;
      companyEnvDetailParam.value.pageSize = 4;
      let param = qs.stringify(companyEnvDetailParam.value)
      axios.get(BASE_URL + '/v1/detail/getCompanyEnvDetail?'+ param).then((response)=>{
        if (response.data.code == 2000) {
          pictureList.value = response.data.data;
          console.log("============== 抓取图片：")
          console.log(pictureList.value)
        } else {
          ElMessage.error(response.data.msg);
        }
      })
    } else {
      ElMessage.error(response.data.msg);
    }
  })

}

const isSubmit = ref("投递简历");
const isSubmitDisabled = ref();
// 检查投递状态
const checkSubmitParams = ref({})
const checkSubmitState = () => {
  console.log("检查投递状态");
  checkSubmitParams.value.userId = userId;
  checkSubmitParams.value.recruitId = recruitId;
  // 参数转换为字符串
  let params = qs.stringify(checkSubmitParams.value)
  // alert(params);
  axios.get(BASE_URL + '/v1/deliver/checkSubmitState?' + params).then((res)=>{
    if (res.data.code === 2000){
      if(res.data.data == 0){
        console.log("未投递")
        //修改投递状态
        isSubmit.value = "投递简历";
        isSubmitDisabled.value = true;
      }else{
        console.log("检查投递状态")
        //修改投递状态
        isSubmit.value = '已投递';
        isSubmitDisabled.value = false;
      }
    }else{
      ElMessage.error(res.data.msg);
    }
  })

}
const resume = ref({});
// 投递简历
const sendResume = () => {
  // console.log("job ===========================")
  // console.log(job.value)
  // console.log(job.value.corporateName)
  // console.log("用户Id为=======")
  // console.log(user.value.userId)
  // console.log("简历ID==========" + ResumeValue.value)
  // console.log(ResumeValue.value)
  // 整合投递信息
  resume.value.corporateName = job.value.corporateName;
  resume.value.recruitmentPosition = job.value.titleName;
  resume.value.numberOfRecruits = job.value.numberOfRecruits;
  resume.value.positionTreatment = job.value.salary;
  resume.value.hrId = job.value.hrId;
  resume.value.seekerId = user.value.userId;
  resume.value.contactNumber = user.value.phone;
  resume.value.resumeId = ResumeValue.value;
  resume.value.recruitmentId = job.value.id;
  // 参数转换为字符串
  let data = qs.stringify(resume.value)
  // console.log("参数为：======================================" )
  // console.log(resume.value)
  axios.post(BASE_URL + '/v1/deliver/deliverResume?', data).then((res)=>{
    if (res.data.code === 2000){
      ElMessage.success("投递成功");
      // 关闭弹窗
      dialogVisible.value = false;
      // 清空简历的值
      ResumeValue.value = {};
      //修改投递状态
      isSubmit.value = '已投递';
      isSubmitDisabled.value = false;
    }else{
      ElMessage.error(res.data.msg);
    }
  })
}


// 投递简历
const ResumeList = ref([
])
//
const ResumeValue = ref()
const getResume =()=>{
  // console.log("当前用户 === " + user.value.userId);
  // console.log("当前用户 === " + user.value.phone);
  // console.log("当前选择的简历为：" )
  // console.log(ResumeValue.value)
  // console.log("-----------------")
  dialogVisible.value = true;
  axios.get(BASE_URL+'/v1/deliver/getResume?userId=' + user.value.userId)
      .then((response)=>{
        if(response.data.code===2000){
          ResumeList.value = response.data.data;
          console.log("ResumeList.value.length == " + ResumeList.value.length);
          console.log("ResumeList.value === " + JSON.stringify(ResumeList.value));
        }else{
          ElMessage.error(response.data.msg);
        }
      })
}
const loadData = (id)=>{
  axios.get(BASE_URL+'/v1/detail/JobDetail/'+id)
      .then((response)=>{
        if (response.data.code == 2000) {
          job.value=response.data.data;
          console.log("============job========")
          console.log(job.value);
          // console.log("id::::"+job.value.id);
          let id = job.value.id;
          axios.get(BASE_URL+'/v1/Csearch/selectCompanyById/'+id)
              .then((response)=>{
                // console.log(response.data.data);
                loadCompany(response.data.data);
              })

        } else {
          ElMessage.error(response.data.msg);
        }
      })
}

//实现取消按钮的功能
const handleClose = ()=>{
  if(confirm('是否关闭本窗口?')){
    //用户确认关闭后,将审批弹窗与确认驳回弹窗一起关掉
    dialogVisible.value = false;
    //取消时把填的数据都清空，表单回复到初始状态
    //saveUserForm.value={};
  }
}

const loadCompany = (id2)=>{
  ids.value.companyId = id2
  ids.value.rId = id.value
  console.log("id.value=== " + ids.value.rId)
  console.log("ids.value.companyId=== " + ids.value.companyId)
  let data = qs.stringify(ids.value)
  axios.get
      // (`${BASE_URL}/v1/Ssearch/selectByCompany?id=${id2}&Nowid=${id1}`)
      (BASE_URL+'/v1/Ssearch/selectByCompany?'+data)
      .then((response)=>{
        if (response.data.code == 2000) {
          companyJob.value=response.data.data;
          // console.log('数据数据！！');
          // console.log(companyJob.value)
          for (let i = 0; i < companyJob.value.length;i++){
            if(companyJob.value[i].educationalRequirements=='10'){
              companyJob.value[i].educationalRequirements='大专';
            }
            else if(companyJob.value[i].educationalRequirements=='20'){
              companyJob.value[i].educationalRequirements='本科';
            }else if(companyJob.value[i].educationalRequirements=='30'){
              companyJob.value[i].educationalRequirements='研究生';
            }
          }
        } else {
          ElMessage.error(response.data.msg);
        }
      })
}

const goToJobDetail = (id)=>{
  window.open('http://localhost:9090/JobDetail?id='+id, '_blank');

}

const goToCompanyDetail = ()=>{
  window.open('http://localhost:9090/CompanyDetail?id='+ids.value.companyId, '_blank');
}

</script>

<style scoped>
*{
  padding: 0;
  margin: 0;
  text-decoration:none;
  font-family: Inter,'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
}
.heard{
  min-width: 1300px;
  height: 160px;
  background: linear-gradient(45deg, rgb(49, 79, 143), rgb(132, 55, 210));/*渐变颜色*/
  width: 100%;
  margin-top:0;
  top:0;
  position: sticky;
  z-index:90;
  color: whitesmoke;
}
.heardImg{
  width: 20%;
  float: left;
  height: 100%;
}
.baa1{
  background: linear-gradient(90deg, rgb(132, 55, 210), rgb(54, 92, 243));/*渐变颜色*/
  margin-left: 30px;
  transition: transform .2s; /* 动画 */
  :deep(.el-button__wrapper) {
    box-shadow: 0 0 5px rgb(108, 66, 149); /* 霓虹边框效果，可以根据需求调整颜色和模糊度 */
    border-radius: 20px; /* 设置圆角半径 */
    cursor: default;
    .el-button__inner {
      cursor: default !important;
    }
  }
}
.baa1:hover{
  background: linear-gradient(45deg, #502a8a, #ba7ef6);
  transform: scale(1.1); /* （120% 缩放按钮动态*/
}
.baa2{
  background: linear-gradient(45deg, #502a8a, #ba7ef6);/*渐变颜色*/
  margin-left: 30px;
  transition: transform .2s; /* 动画 */
  :deep(.el-button__wrapper) {
    box-shadow: 0 0 5px rgb(108, 66, 149); /* 霓虹边框效果，可以根据需求调整颜色和模糊度 */
    border-radius: 20px; /* 设置圆角半径 */
    cursor: default;
    .el-button__inner {
      cursor: default !important;
    }
  }
}
.baa2:hover{
  background: linear-gradient(90deg, rgb(132, 55, 210), rgb(54, 92, 243));
  transform: scale(1.1); /* （120% 缩放按钮动态*/
}
.Title{
  width: 450px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
h2{
  color: #481879;
  margin-left: 30px;
  margin-top: 30px;
}
.grid-demo{
  width: 90%;
  height: 30%;
  margin-left: 20px;
}
.cardZW{
  width: 97%;
  height: 19vh;
  margin-left: 25px;
  background-color: white;
  border-radius: 20px;
  color: #612e94;
}
.cardZW:hover{
  background-color: rgba(191, 187, 211, 0.65);
  color: rgba(33, 31, 33, 0.74);
  h3{
    color: #612e94;
  }
}
h3{
  color: #6c6c6c;
  margin-left: 30px;
  width: 80%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
h5{
  color: white;
}
</style>
